<template>
    <div class="template">
        <div class="background">
            <div class="title"> 新冠肺炎</div>
            <div class="title"> 确诊病患活动轨迹速查</div>
        </div>
        <!--消息框-->
        <div class="information">
        <el-select v-model="value1" multiple placeholder="全国">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="value2" multiple placeholder="全部">
            <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <div class="blank">
            <!--位置-->
            <div class="positon"><svg-icon icon-class="Chart1"></svg-icon>位置：北京</div>
            <!--发布时间-->
            <div class="time"><svg-icon icon-class="Time1"></svg-icon>发布时间：2020-07-30</div>
            <!--病患信息-->
            <div class="people"><svg-icon icon-class="user"></svg-icon>病患信息:男，18岁</div>
            <!--其他信息-->
            <div class="other"><svg-icon icon-class="eye"></svg-icon>其它信息:现住昌平区天通苑北街道西三区现住昌平区天通苑北街道西三区</div>
            <br />
            <!--轨迹-->
            <div class="guiji">
                <svg-icon icon-class="dingzi"></svg-icon>行为轨迹<br />
                <span class="circle"></span>
                <strong>2020年7月23日</strong> 
                <div class="content">
                    被告知其外祖母为大连市无症状感染者的密切接触者后，其外祖母被转送到集中隔离点进行观察，一家人开始居家隔离
                </div>

                <span class="circle"></span>
                <strong>2020年7月27日</strong> 
                <div class="content">
                    其外祖母确诊后，该患儿作为密切接触者由120救护车转送至集中隔离点进行观察
                </div>

                <span class="circle"></span>
                <strong>2020年7月28日</strong> 
                <div class="content">
                    其父亲确诊，转入地坛医院治疗
                </div>
                <span class="circle"></span>
                <strong>2020年7月29日</strong> 
                <span class="latest">最新</span>
                <div class="content">
                    患儿核酸检测结果为阳性，由120救护车转运至昌平区医院就诊，经专家综合研判，当日夜间诊断为确诊病例，临床分型为普通型
                </div>
                <div class="butn">
                    <el-button-group>
                    <el-button type="primary" @click="open">转发给好友</el-button>
                    <el-button type="primary" @click="open">转发至朋友圈</el-button>
                </el-button-group>
                </div>
            </div>
        </div>
        </div>

        <!--消息框-->
        <div class="information">
        <div class="blank">
            <!--位置-->
            <div class="positon"><svg-icon icon-class="Chart1"></svg-icon>位置：北京市 昌平区</div>
            <!--发布时间-->
            <div class="time"><svg-icon icon-class="Time1"></svg-icon>发布时间：2020-07-29</div>
            <!--病患信息-->
            <div class="people"><svg-icon icon-class="user"></svg-icon>病患信息:男，34岁</div>
            <!--其他信息-->
            <div class="other"><svg-icon icon-class="eye"></svg-icon>其它信息:现住昌平区天通苑北街道西三区现住昌平区天通苑北街道西三区</div>
            <br />
            <!--轨迹-->
            <div class="guiji">
                <svg-icon icon-class="dingzi"></svg-icon>行为轨迹<br />
                <span class="circle"></span>
                <strong>2020年7月23日</strong> 
                <div class="content">
                    被告知其岳母为大连市无症状感染者的密切接触者后，一家人开始居家隔离，其岳母被转送到集中隔离点进行观察
                </div>

                <span class="circle"></span>
                <strong>2020年7月27日</strong> 
                <span class="latest">最新</span>
                <div class="content">
                    其岳母确诊后，该病例作为密切接触者由120救护车转送至集中隔离点进行医学观察，经核酸检测结果为阳性，随后由120救护车转运至昌平区医院就诊，体温38.1℃，结合影像学结果等次日确诊，临床分型为轻型
                </div>
                <div class="butn">
                    <el-button-group>
                    <el-button type="primary" @click="open">转发给好友</el-button>
                    <el-button type="primary" @click="open">转发至朋友圈</el-button>
                </el-button-group>
                </div>
            </div>
        </div>
        </div>
    
    <!--消息框-->
        <div class="information">
        <div class="blank">
            <!--位置-->
            <div class="positon"><svg-icon icon-class="Chart1"></svg-icon>位置：辽宁省 大连市</div>
            <!--发布时间-->
            <div class="time"><svg-icon icon-class="Time1"></svg-icon>发布时间：2020-07-29</div>
            <!--病患信息-->
            <div class="people"><svg-icon icon-class="user"></svg-icon>病患信息:孙某，女，47岁</div>
            <!--其他信息-->
            <div class="other"><svg-icon icon-class="eye"></svg-icon>其它信息:大连凯洋世界海鲜股份有限公司职工，居住地址：大连市甘井子区大连湾街道</div>
            <br />
            <!--轨迹-->
            <div class="guiji">
                <svg-icon icon-class="dingzi"></svg-icon>行为轨迹<br />
                <span class="circle"></span>
                <strong>2020年7月16日-17日</strong> 
                <div class="content">
                    每日11时至李家市场米线店就餐。
                </div>

                <span class="circle"></span>
                <strong>2020年7月26日</strong> 
                <div class="content">
                    作为本市确诊病例的密切接触者进行核酸检测筛查，大连市疾控中心新冠肺炎病毒核酸检测阳性
                </div>

                <span class="circle"></span>
                <strong>2020年7月28日</strong> 
                <span class="latest">最新</span>
                <div class="content">
                    由省专家组复核为确诊病例（普通型），目前病情稳定，在定点医院隔离治疗。对排查的密切接触者正在实施集中隔离医学观察。
                </div>

                <div class="butn">
                    <el-button-group>
                    <el-button type="primary" @click="open">转发给好友</el-button>
                    <el-button type="primary" @click="open">转发至朋友圈</el-button>
                </el-button-group>
                </div>
            </div>
        </div>
        </div>

        <!--消息框-->
        <div class="information">
        <div class="blank">
            <!--位置-->
            <div class="positon"><svg-icon icon-class="Chart1"></svg-icon>位置：江西省 宜春市</div>
            <!--发布时间-->
            <div class="time"><svg-icon icon-class="Time1"></svg-icon>发布时间：2020-02-15</div>
            <!--病患信息-->
            <div class="people"><svg-icon icon-class="user"></svg-icon>病患信息:范某某，男，48岁</div>
            <!--其他信息-->
            <div class="other"><svg-icon icon-class="eye"></svg-icon>其它信息:丰城市淘沙镇后坊村</div>
            <br />
            <!--轨迹-->
            <div class="guiji">
                <svg-icon icon-class="dingzi"></svg-icon>行为轨迹<br />
                <span class="circle"></span>
                <strong>2020年1月16-21日</strong> 
                <div class="content">
                    从福建沙县自驾车回家，后一直在村里
                </div>

                <span class="circle"></span>
                <strong>2020年1月22日</strong> 
                <div class="content">
                    前往淘沙镇后坊亲家（范某某）家吃饭
                </div>

                <span class="circle"></span>
                <strong>2020年1月23日</strong> 
                <div class="content">
                    到淘沙镇后坊村委水东李家丈母娘家吃饭
                </div>

                 <span class="circle"></span>
                <strong>2020年1月24日-1月29日</strong> 
                <div class="content">
                    在村里活动
                </div>

                 <span class="circle"></span>
                <strong>1月30日-2月1日</strong> 
                <div class="content">
                    在金达驾校隔离观察
                </div>

                 <span class="circle"></span>
                <strong>2020年2月2日</strong> 
                <span class="latest">最新</span>
                <div class="content">
                    出现发热症状，被120送往丰城市人民医院就诊
                </div>

                <div class="butn">
                    <el-button-group>
                    <el-button type="primary" @click="open">转发给好友</el-button>
                    <el-button type="primary" @click="open">转发至朋友圈</el-button>
                </el-button-group>
                </div>
            </div>
        </div>
        </div>

    </div>
</template>

<script>
export default {
     data() {
      return {
          //选择框数据
        options: [{
          value: '选项1',
          label: '全国'
        }, {
          value: '选项2',
          label: '北京'
        }, {
          value: '选项3',
          label: '上海'
        }, {
          value: '选项4',
          label: '江西'
        }, {
          value: '选项5',
          label: '湖北'
        }],

        option: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '男'
        },{
          value: '选项3',
          label: '女'
        }],

        value1: [],
        value2: []
      }
    },
    methods:{
        //弹框方法
         open() {
        this.$confirm('是否分享此段病患轨迹？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已成功复制该病患轨迹链接'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消分享'
          });          
        });
      }
    }
}
</script>
<style scoped>
.background {
  background-image: url("../../assets/bg2.png");
  height: 200px;
  background-size: cover;
  margin: -.5em;
  margin-bottom: 1em;
  padding: 1em;
  color: #ffffff;
}
.background > .title {
  line-height: 2em;
  font-size: 30px;
  font-weight: bold;
}

.blank .butn{
    text-align: center;
}

.template{
    margin-top: .5em;
}

.template > .information{
    background-color:#ffffff;
    padding:1em;
}

.template > .blank{
    background-color: #f8f8f8;
    padding :5px;
}

.template > .information > .blank{
    background-color: #f8f8f8;
    padding: 5px;
}

.guiji .circle{
    display: inline-block; /*行内块 */
    width: 5px;
    height: 5px;
    background-color:#005dff;
    border-radius: 50%;
}

.guiji .latest{
    display: inline-block;
    background-color: #f43b3b;
    color: #ffffff;
    padding:0 .4em;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.6em;
}

.guiji > .content{
    border-radius: 8px;
    padding:.5em;
    color:#666666;
    line-height: 1em;
    font-size: 14px;
    padding-bottom: 1.5em;
}

.guiji .latest{
    display: inline-block;
    background-color: #f43b3b;
    color: #ffffff;
    padding:0 .4em;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.6em;
}

</style>

